<template>
	<view style="width: 100%;min-height: 100vh;background-color: #f1f1f1;">
		<view style="height: 1upx;"></view>
		<u-card v-for="(item, index) in list" :key="index" style="position: relative;">
			
			<view slot="head">
				<u-icon name="order" size="36"></u-icon>
				<text style="margin-left: 10upx;">订单号：{{ item.order_num || '' }}</text>
			</view>
			<view class="" slot="body">
				<view class="pay-status">
					<image v-if="item.status === '10'" class="img" src="../../../static/zsoa/pay.png" mode=""></image>
					<image v-if="item.status === '0'" class="img" src="../../../static/zsoa/nopay.png" mode=""></image>
				</view>
				<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
					<view class="u-body-item-title u-line-2">车牌号：<text style="font-weight: bold;">{{ item.car_id || '' }}</text></view>
					<view class="u-body-item-title u-line-2">创建时间：{{ item.create_time || '' }}</view>
					<view class="u-body-item-title u-line-2">支付时间：{{ item.pay_time || '' }}</view>
					<view class="u-body-item-title u-line-2">支付金额：<text style="font-weight: bold;">{{ item.price || '' }}</text>元</view>
				</view>
			</view>
		</u-card>
		
		<view style="height: 200upx;"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			pageNum:1,
			list: []
		};
	},
	methods: {
		getList() {
			this.$ajax
				.get({
					url: '/WxPay/getOrderList?pageNum='+this.pageNum
				})
				.then(res => {
					res.data.data.forEach(item=>{
						item.price = item.price/100
					})
					if(this.pageNum === 1){
						this.list = res.data.data;
					}else{
						if(!res.data.data.length){
							uni.showToast({
								title:"没有更多了...",
								icon:"none"
							})
							return
						}
						this.list = this.list.concat(res.data.data);
					}
					
						
				});
		}
	},
	mounted() {
		this.getList();
	},
	onReachBottom() {
		this.pageNum++;
		this.getList()
	},
	onPullDownRefresh() {
		this.list = [];
		this.pageNum = 1;
		this.getList();
		setTimeout(()=>{
			uni.stopPullDownRefresh()
		},1500)
	}
};
</script>

<style lang="scss" scoped>
.u-card-wrap {
	background-color: $u-bg-color;
	padding: 1px;
}

.u-body-item {
	font-size: 32rpx;
	color: #333;
	padding: 20rpx 10rpx;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	.u-body-item-title {
		width: 100%;
		font-size: 28upx;
	}
}

.u-body-item image {
	width: 120rpx;
	flex: 0 0 120rpx;
	height: 120rpx;
	border-radius: 8rpx;
	margin-left: 12rpx;
}
.pay-status{
	width: 120upx;
	height: 120upx;
	// background-color: #C0C4CC;
	position: absolute;
	top: 30upx;
	right: 30upx;
	z-index: 10;
	.img{
		width: 100%;
		height: 100%;
	}
}
</style>
